<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <title></title>
    <script type="text/javascript" src="../../js/commonCss.js"></script>
    <link rel="stylesheet" type="text/css" href="../../styles/common.css" />
    <script src="../../js/jquery-3.2.1.min.js"></script>
    <script src="../../js/jquery.formHelp.js"></script>
</head>
<body>
<div class="definewidth m20">
    <form class="form-inline" action="list.html" method="get">
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">用户名称</div>
                <input type="text" class="form-control" id="name" placeholder="">
            </div>
            <div class="input-group">
                <div class="input-group-addon">账号</div>
                <input type="text" class="form-control" id="account" placeholder="">
            </div>
            <div class="input-group">
                <div class="input-group-addon">部门</div>
                <select name="org" class="form-control" id="org" name="org" >
                </select>
            </div>
            <div class="input-group">
                <div class="input-group-addon">角色</div>
                <select name="role_id" class="form-control" id="role_id" name="role_id" >
                </select>
            </div>
        </div>
        <div class="form-group">
            <button type="button" class="btn btn-primary" id="search">查询</button>
        </div>
    </form>
    <button type="button" class="btn btn-success hideButton" id="addnew">新增</button>
    <button type="button" class="btn btn-danger hideButton" id="delect">删除</button>
    <table class="table table-bordered table-hover m10" id="table">
    </table>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="modalUser">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="form">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">用户管理</h4>
                </div>
                <div class="modal-body">
                    <form class="form">
                        <div class="form-group fix">
                            <div class="input-group w250 mt10">
                                <div class="input-group-addon">用户名</div>
                                <input type="text" class="form-control" id="userName" name="userName" maxlength="32">
                                <div class="required-icon">*</div>
                            </div>
                            <div class="input-group w250 mt10 hidden">
                                <div class="input-group-addon">用户id</div>
                                <input type="text" class="form-control" id="userId" name="userId">
                                <input type="text" class="form-control" id="lastLoginTime" name="lastLoginTime">
                                <input type="text" class="form-control" id="isValid" name="isValid" value="true">
                            </div>
                            <div class="l w250 mr20">
                                <div class="input-group w250 mt10">
                                    <div class="input-group-addon">账号</div>
                                    <input type="text" class="form-control" id="loginCode" name="loginCode" maxlength="32">
                                    <div class="required-icon">*</div>
                                </div>
                                <div class="input-group w250 mt10">
                                    <div class="input-group-addon">手机号码</div>
                                    <input type="text" class="form-control" id="mobile" name="mobile" maxlength="11">
                                    <div class="required-icon">*</div>
                                </div>
                                <div class="input-group w250 mt10">
                                    <div class="input-group-addon">所属部门</div>
                                    <select class="form-control" id="organizationId" name="organizationId" >
                                    </select>
                                    <div class="required-icon">*</div>
                                </div>
                            </div>
                            <div class="l w250">
                                <div class="input-group w250 mt10 hidden">
                                    <div class="input-group-addon">密码</div>
                                    <input type="text" class="form-control" id="password" name="password" maxlength="32">
                                    <div class="required-icon">*</div>
                                </div>
                                <div class="input-group w250 mt10">
                                    <div class="input-group-addon">电子邮箱</div>
                                    <input type="text" class="form-control" id="email" name="email" maxlength="32">
                                    <div class="required-icon">*</div>
                                </div>
                                <div class="input-group w250 mt10">
                                    <div class="input-group-addon">所属角色</div>
                                    <select class="form-control" id="roleId" name="roleId" >
                                    </select>
                                    <div class="required-icon">*</div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="submintBtn">保存</button>
                    <button type="button" class="btn btn-primary" id="submintBtn2">保存</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!--<div class="modal fade" tabindex="-1" role="dialog" id="modal2">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="form2">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">修改密码</h4>
                </div>
                <div class="modal-body">
                    <form class="form">
                        <div class="form-group fix">
                            <div class="input-group w250 mt10">
                                <div class="input-group-addon">用户名</div>
                                <input type="text" class="form-control" name="userName" maxlength="32" readonly>
                            </div>
                            <div class="input-group w250 mt10">
                                <div class="input-group-addon">账号&nbsp;&nbsp;&nbsp;</div>
                                <input type="text" class="form-control" name="loginCode" id="loginCode2" maxlength="32" readonly>
                            </div>
                            <div class="input-group w250 mt10">
                                <div class="input-group-addon">原密码</div>
                                <input type="text" class="form-control" id="oldPassword" maxlength="32" name="oldPassword">
                                <div class="required-icon">*</div>
                            </div>
                            <div class="input-group w250 mt10">
                                <div class="input-group-addon">新密码</div>
                                <input type="text" class="form-control" id="newPassword" maxlength="32" name="newPassword">
                                <div class="required-icon">*</div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="submintBtn3">保存</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </form>
        </div>&lt;!&ndash; /.modal-content &ndash;&gt;
    </div>&lt;!&ndash; /.modal-dialog &ndash;&gt;
</div>&lt;!&ndash; /.modal &ndash;&gt;-->

<script type="text/javascript" src="../../libs/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../libs/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="../../libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../libs/bootstrap-table/bootstrap-table.min.css" />
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript" src="../../js/formatTime.js"></script>
<script type="text/javascript" src="../../js/validateform.js"></script>
<script type="text/javascript" src="list.js?t=20170801"></script>

<script type="text/javascript">
    document.onkeydown=function(event){
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if(e && e.keyCode==13){ // enter 键
            document.getElementById('search').click();
            return false;
        }
    };
    $.ajax({
        type: "POST",
        url: ctx + "/organization/getOrganization",
        success: function(data){
            if(data.code == 200){
                setOption('#org', data.data)
                setOption('#organizationId', data.data)
            }
        }
    });
    $.ajax({
        type: "POST",
        url: ctx + "/role/query",
        data:{
            pageSize: '0'
        },
        success: function(data){
            if(data.code == 200){
                setRole('#roleId', data.data.rows)
                setRole('#role_id',data.data.rows);
            }
        }
    });
    var formdata = '';
    $('#addnew').click(function () {
        $("#userName").val('')
        $("#userId").val('')
        $("#loginCode").val('')
        $("#mobile").val('')
        $("#organizationId").val('')
        $("#email").val('')
        $("#roleId").val('')
        $('#modalUser').modal({backdrop: 'static', keyboard: false});
        $("#submintBtn2").hide()
        $("#submintBtn").show()
        $("#userName").removeAttr('readonly')
        $("#userId").removeAttr('readonly')
        $("#loginCode").removeAttr('readonly')
        $("#mobile").removeAttr('readonly')
        $("#organizationId").removeAttr('readonly')
        $("#password").removeAttr('readonly')
        $("#email").removeAttr('readonly')
        $("#roleId").removeAttr('readonly')
    })
    $("#submintBtn").click(function () {
        if($("#form").valid()){
            formdata = $("#form").serializeJson()
            $.ajax({
                type: 'POST',
                url: ctx + "/user/add",
                contentType: "application/json",
                dataType: 'json',
                data: JSON.stringify(formdata),
                success: function(data){
                    if(data.code == 200){
                        $('#modalUser').modal('hide')
                        $('#table').bootstrapTable('refresh', {url: ctx + '/user/query'});
                    } else {
                        alert(data.msg)
                    }
                }
            })
        }
    })
    $("#submintBtn2").click(function () {
        if($("#form").valid()){
            formdata = $("#form").serializeJson()
            $.ajax({
                type: 'POST',
                url: ctx + "/user/update",
                contentType: "application/json",
                dataType: 'json',
                data: JSON.stringify(formdata),
                success: function(data){
                    $('#modalUser').modal('hide')
                    $('#table').bootstrapTable('refresh', {url: ctx + '/user/query'});
                }
            })
        }
    })

    function setOption(id, param){
        var html = '';
        html +='<option value="">请选择</option>';
        for (var i =0;i<param.length;i++){
            html +='<option value="'+ param[i].organizationId +'">'+ param[i].orgName +'</option>';
        }
        $(id).append(html);
    }
    function setRole(id, param){
        var html = '';
        html +='<option value="">请选择</option>';
        for (var i =0;i<param.length;i++){
            html +='<option value="'+ param[i].roleId +'">'+ param[i].roleName +'</option>';
        }
        $(id).append(html);
    }
</script>
</body>
</html>